<template >
  <div>
     <h1>购物车</h1>
      <h1 id="city" @click="state.city='桂林'">{{state.city}}</h1>
      <h1 ref="myalias">别名：{{state.alias}}</h1>
      <button @click="changeData">改变子组件数据和调用子组件的方法</button>
      <hr>
      <cartOne ref="cartone"></cartOne>
      
  </div>
</template>
<script setup>
import cartOne from './cartOne.vue'
  // vue3的生命周期、
  import {onMounted,onBeforeUpdate,onUpdated,onBeforeUnmount,onUnmounted,reactive,ref} from 'vue'
  // vue3的  组件挂载后的生命周期  可以在内部操作 dom和子组件等
    let state=reactive({
      city:"三亚",
      alias:"东北亚"
    })
    // 先创建一个ref的变量 用ref属性 挂载到 元素或组件上
    let myalias=ref(null); //代表myalias 的h1元素


    onMounted(()=>{
      console.log("组件挂载成功")
      let citydom=document.getElementById("city")
      citydom.style.color="red";

      // 操作ref获取的元素
      myalias.value.style.color="blue";
    })

        // 也可以用ref属性 挂载到 子组件上
    let cartone=ref(null)
    let changeData=()=>{
        //  cartone.value  就是用ref获取的子组件
        // 改变和访问子组件的数据 不需要加.value
         cartone.value.msg="改变子组件的数据"
         cartone.value.say() //访问子组件的方法
    }

      //组件更新前
    onBeforeUpdate(()=>{
        console.log("组件更新前")
    })
    // 组件更新后
    onUpdated(()=>{
       console.log("组件更新后")
    })
    // vue3的组件销毁前 生命周期更语义化
     onBeforeUnmount(()=>{
      console.log("组件销毁前")
     })
    // 组件销毁后 
    onUnmounted(()=>{
      console.log("组件销毁后")
    })  
    
  


</script>
<style lang="scss" scoped>
  
</style>